import React, { Component } from 'react';
import { Card, WhiteSpace,Progress, List, Badge, Flex, Icon, NavBar, WingBlank } from 'antd-mobile';
import { HomeOutlined, HomeFilled, CommentOutlined,CrownOutlined,CarryOutOutlined, MessageOutlined, UserOutlined, DiffOutlined } from '@ant-design/icons';
import './header.css'
export default class MsgCard extends Component {
    constructor(props) {
        super(props)
        this.state={
            percent:60
        }
    }
    a = () => {
        console.log(1);
    }
    render() {
        const Item = List.Item;

        return (
            <div className='headerContainer'>
                <div className='barhomeheader'>
                    <div className='headerLeft'>
                        <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="" className='myAvatar' />
                        <div className='nameContainer'>
                            <div style={{fontSize:18,color:'#fff'}}>内蒙古xxxxx吧</div>
                            <div style={{color:'#fff'}}>Lv10 学霸</div>
                            <div><Progress barStyle={{ backgroundColor:'#f0932b'}} style={{borderRadius:'10px'}} percent={this.state.percent} position="normal" /></div>
                        </div>
                    </div>
                    <div className='mySign'>
                        <CarryOutOutlined style={{marginLeft:12,marginRight:5}}></CarryOutOutlined>
                        签到
                    </div>
                </div>
                <div className='mid'>
                    <WingBlank>
                        <div className='illustrate'>
                            <div style={{ marginRight: 12, color:'#0984e3'}}>说明</div>
                            <div className='myfont'>【阿斯顿顶】顶顶顶顶顶顶顶
                            阿斯顿顶顶顶顶顶顶顶顶阿斯顿顶顶顶顶顶顶顶顶阿斯顿顶顶顶顶顶顶顶顶阿斯顿顶顶顶顶顶顶顶顶阿斯顿顶顶顶顶顶顶顶顶
                            </div>
                        </div>
                        <div className='illustrate'>
                            <div style={{ marginRight: 12, color: '#0984e3' }}>置顶</div>
                            <div className='myfont'>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit consequuntur voluptatibus minima perspiciatis cumque. Eos, doloribus quod, ex ut odio dolorem illo, eaque ducimus perspiciatis reiciendis et consequuntur veritatis. Molestias!</div>
                        </div>
                    </WingBlank>
                    
                </div>
            </div>
        )
    }
}
